import React, { PureComponent, Fragment } from 'react';
import styles from './index.less';
import {
  Switch,
} from 'antd';
import { connect } from 'dva';

import L from 'leaflet';   //引入leaflet
import './leaflet.less';
import 'leaflet.chinatmsproviders'
//把图标重新引入
delete L.Icon.Default.prototype._getIconUrl
L.Icon.Default.imagePath = ''
L.Icon.Default.mergeOptions({
  iconRetinaUrl: require('../../assets/images/marker-icon-2x.png'),
  iconUrl: require('../../assets/images/marker-icon.png'),
  shadowUrl: require('../../assets/images/marker-shadow.png')
})


@connect(({ devices, loading }) => ({
  devices
}))
class BasicList extends PureComponent {
  constructor(props) {
    super(props);
    this.scrollInterval = '';
    this.state = {
      points:[[42.95369, 89.177699],
        [42.952528, 89.189115],
        [42.943324, 89.185166],
        [42.943324, 89.185166],
        [42.941407, 89.173708],
        [42.943858, 89.168429],
        [42.953858, 89.169429],
        [42.954858, 89.168429],
        [42.944894, 89.178386],
        [42.949544, 89.178214],
        [42.949544, 89.186282]
      ],
      markerArr:[]
    }
  }


  componentDidMount() {
    var normalm = L.tileLayer.chinaProvider('TianDiTu.Normal.Map', {
        maxZoom: 18,
        minZoom: 5
      }),
      normala = L.tileLayer.chinaProvider('TianDiTu.Normal.Annotion', {
        maxZoom: 18,
        minZoom: 5
      }),
      imgm = L.tileLayer.chinaProvider('TianDiTu.Satellite.Map', {
        maxZoom: 18,
        minZoom: 5
      }),
      imga = L.tileLayer.chinaProvider('TianDiTu.Satellite.Annotion', {
        maxZoom: 18,
        minZoom: 5
      });

    var normal = L.layerGroup([normalm, normala]),
      image = L.layerGroup([imgm, imga]);

    var baseLayers = {
      "地图": normal,
      "影像": image,
    }

    var overlayLayers = {

    }

    var map = L.map("mapDiv", {
      center: [42.948668, 89.178466],
      zoom: 15,
      layers: [image],
      zoomControl: false
    });

    L.control.layers(baseLayers, overlayLayers).addTo(map);
    L.control.zoom({
      zoomInTitle: '放大',
      zoomOutTitle: '缩小'
    }).addTo(map);

    const mypop = L.popup({
      autoClose:false
    });
    //自定义一个maker
    const greenIcon = L.icon({
      iconUrl: 'http://111.75.54.230:8086/upload/5/5c/5c75e76cebd9df08d84803a9.png',
      iconSize: [30,30], // size of the icon
    });
    //自定义一个maker
    const redIcon = L.icon({
      iconUrl: 'http://111.75.54.230:8086/upload/5/5c/5c75e771ebd9df08d84803ac.png',
      iconSize: [30,30], // size of the icon
    });
    const that=this
    map.on('click', function (e) {
      mypop.setLatLng(e.latlng)
        .setContent('你临幸了这个点：<br>' + e.latlng.toString())
        .openOn(map);
      const oMarker = L.marker(e.latlng, { icon: redIcon}).addTo(map);
      const popup = oMarker.bindPopup(html, {closeOnClick:true,autoClose:false, maxHeight: 250, maxWidth: 490, className: 'content22', offset: [0, 0] }).on('popupopen', function (params) {
        console.log(params)
      })
      that.state.markerArr.push(oMarker);
      that.setState({
        oMarker: that.state.markerArr
      })
      return false
    });
    map.on("zoomend", e => {

      //获取当前放大或者缩小的等级
      // console.log(e.target.getZoom());
    })

    map.on("moveend", e => {
      // console.log( map.getCenter())
    })


    //maker上自定义一个popup
    const html = '<p>Hello world!<br />This is a nice popup.</p>';

    for(let i=0;i<this.state.points.length;i++){
      const oMarker = L.marker(this.state.points[i], { icon: i%2===0?greenIcon:redIcon }).addTo(map);
      // 绑定一个提示标签
      oMarker.id='markerId'+i;
      console.log('oMarker',oMarker);
      const popup = oMarker.bindPopup(html, {closeOnClick:true,autoClose:false, maxHeight: 250, maxWidth: 490, className: 'content22', offset: [0, 0] }).on('popupopen', function (params) {
        console.log(params)
      })

      oMarker.on('click', function (e) {
        console.log(e);
        oMarker.setIcon(parseInt(Math.random()*10)%2!==0?greenIcon:redIcon);
      });
      this.state.markerArr.push(oMarker)
    }
    this.setState({
      oMarker:this.state.oMarker
    },function() {
      console.log(this.state.markerArr)
    })
    setInterval(function() {
      for(let i=0;i<that.state.markerArr.length;i++){
        that.state.markerArr[i].setIcon(parseInt(Math.random()*10)%2!==0?greenIcon:redIcon);
      }
    },1000)




  }



  render() {
    const position = [this.state.lat, this.state.lng]
    return <div  id={'mapDiv'} style={{display:'flex',fontSize:'30px', height:'100%', flexDirection: 'column',  justifyContent: "center",alignItems: "center"}}>
    </div>;
  }
}

export default BasicList;
